<template>
    <el-row class="main tl box box-tb">
        <el-col class="padd20 bgf mb10 box box-align-center box-pack-between">
            <el-page-header @back="$router.go(-1)" title="题库" content="编辑题目">
            </el-page-header>
            <el-button type="primary" class="pub-btn" @click="save">保存</el-button>
        </el-col>
        <el-col :span="24" id="content" class="question-list bgf">
            <el-col v-if="tabsList.length !=0">
                <div class="h130" v-for="(item, index) in tabsList" :key="index" :id="`content-item${index}`">
                    <radio-view :Index="index" ref="child" :Data="item" :setScore="setScore" :options="options"
                        @handleUpdate="handleUpdate(arguments,item)" @handleDeleteItem="handleDeleteItem"
                        v-if="item.type==1"></radio-view>
                    <check-view :Index="index" ref="child" :Data="item" :setScore="setScore" :options="options"
                        @handleUpdate="handleUpdate(arguments,item)" @handleDeleteItem="handleDeleteItem"
                        v-if="item.type==2"></check-view>
                    <judge-view :Index="index" ref="child" :Data="item" :setScore="setScore" :options="options"
                        @handleUpdate="handleUpdate(arguments,item)" @handleDeleteItem="handleDeleteItem"
                        v-if="item.type==3"></judge-view>
                </div>
            </el-col>

        </el-col>
    </el-row>
</template>

<script>
    import radioView from '../paper/components/radio.vue';
    import checkView from '../paper/components/check.vue';
    import judgeView from '../paper/components/judge.vue';
    export default {
        components: {
            radioView,
            checkView,
            judgeView
        },
        data() {
            return {
                schoolid: this.$store.state.schoolId,
                dialogVisible: false,
                tabsList: [],
                activeIndex: 0,
                contentLocation: [],
                setScore: {
                    radioValue: 0,
                    checkValue: 0,
                    judgeValue: 0
                },
                options: [],
                type:1

            };
        },
        created() {
            // this.setEditor()
        },
        mounted() {
            console.log(JSON.parse(this.$route.query.data));
            this.tabsList.push(JSON.parse(this.$route.query.data))
            // this.setEditor()
            // 监听滚动事件
            this.$nextTick(function() {
                this.addScrollFun()
                //获取课程关联关系
                this.getCourseData()
                this.tabsList.forEach((ele, index) => {
                    this.$refs.child[index].setEditor()
                    this.$refs.child[index].setData()
                })
            })
        },
        methods: {
            getCourseData() {
                let url = '/ycous/getcouslist';
                let params = {
                    schoolid: this.schoolid,
                    type: this.type,
                };
                this.$ajax.post(url, params).then(res => {
                    console.log(res);
                    if (res.code == 0) {
                        // this.options =
                        // res.list.map(r=>{console.log(r);})
                        let arr = [];
                        res.list.forEach((item, index) => {
                            let object = {
                                value: item.id,
                                label: item.name,
                                children: []
                            }
                            arr.push(object)
                            item.stages.forEach((a, i) => {
                                let itemObject = {
                                    value: a.id,
                                    label: a.title,
                                }
                                arr[index].children.push(itemObject)
                            })
                        })
                        console.log(arr);
                        this.options = arr
                    }
                })
            },
            handleUpdate(e, item) {
                // console.log(e,item);
                let art = item;
                art.score = parseInt(e[0])
                this.$set(this.tabsList, e[1], art)
                // console.log(this.tabsList);
            },
            //设置子组件分值
            handleSetSonScore() {
                this.dialogVisible = false;
                this.tabsList.forEach((ele, index) => {
                    this.$refs.child[index].handleSetScore();
                })
            },
            //删除某项
            handleDeleteItem(index) {
                this.tabsList.splice(index, 1)
            },
            //获取选项数据
            getSonData() {
                let str = {};
                this.tabsList.forEach((ele, index) => {
                    str = this.$refs.child[index].getEditData();
                })
                return str

            },
            //保存多个
            save() {
                // this.getSonData();
                // console.log(this.getSonData());
                // return
                let url = '/ysubject/save';
                this.$ajax.post(url, {
                    jsonstr: JSON.stringify(this.getSonData())
                }).then(res => {
                    console.log(res);
                    if (res.code == 0) {
                        this.$message({
                            message: '添加成功',
                            type: 'success',
                            duration: 1500,
                            onClose: res => {
                                this.$router.go(-1)
                            }
                        });

                    }
                })
            },
            addScrollFun() {
                document
                    .querySelector('#content')
                    .addEventListener('scroll', this.listenScroll)
            },

            removeScrollFun() {
                document
                    .querySelector('#content')
                    .removeEventListener('scroll', this.listenScroll)
            },

            // 内容部分滚动事件
            listenScroll(e) {
                // console.log(e.target.scrollTop);
                this.contentLocation.forEach((el, index) => {
                    // 当前滚动高度大于等于link高度 （这个34是我菜单栏每个的高度  可以根据自己的实际情况设置）
                    if (e.target.scrollTop >= el) {
                        this.activeIndex = index
                    }
                })
            },

            // 在获取页面内容之后调用这个方法 内容部分标题相对于顶部的位置--用来左右滚动联动
            handleLocation() {
                this.contentLocation = []
                if (Array.isArray(this.tabsList)) {
                    this.tabsList.forEach((ele, index) => {
                        this.contentLocation.push(
                            document.querySelector(`#content-item${index}`).offsetTop
                        )
                    })
                }
            },
            //自动定位
            scroolView() {
                this.$nextTick(function() {
                    var container = this.$el.querySelector("#content");
                    container.scrollTop = container.scrollHeight
                    this.handleLocation()
                })
            },
            //增加单选
            handleAddRadio() {
                if (this.tabsList.length == 0) {
                    let item = {
                        type: 1,
                        item: [],
                        title: '',
                        analysis: '',
                        score: 3
                    };
                    this.tabsList.push(item)
                    this.$nextTick(function() {
                        this.$refs.child[0].setEditor()
                    })
                } else {
                    let item = {
                        type: 1,
                        item: [],
                        title: '',
                        analysis: '',
                        score: 3
                    };
                    this.tabsList.push(item)
                    this.$nextTick(function() {
                        this.$refs.child[this.tabsList.length - 1].setEditor()
                    })
                }
                this.scroolView()
            },
            //增加多选
            handleAddCheck() {

                let item = {
                    type: 2
                };
                this.tabsList.push(item)
                if (this.tabsList.length == 0) {
                    this.$nextTick(function() {
                        this.$refs.child[0].setEditor()
                    })
                } else {
                    this.$nextTick(function() {
                        this.$refs.child[this.tabsList.length - 1].setEditor()
                    })
                }
                this.scroolView()
            },
            //增加判断
            handleAddJudge() {
                let item = {
                    type: 3
                };
                this.tabsList.push(item)
                if (this.tabsList.length == 0) {
                    this.$nextTick(function() {
                        this.$refs.child[0].setEditor()
                    })
                } else {
                    this.$nextTick(function() {
                        this.$refs.child[this.tabsList.length - 1].setEditor()
                    })
                }
                this.scroolView()
            }
        }
    }
</script>

<style scoped lang="scss">
    .bgf {
        background-color: #fff;
    }

    .main {
        box-sizing: border-box;
        height: 100%;
        // background-color: #fff;
        overflow-y: auto;
    }

    .bottom {
        overflow-y: auto;
    }

    .order {
        flex-wrap: wrap;

        a {
            margin: 5px;
            width: 32px;
            height: 32px;
            line-height: 32px;
            text-align: center;
            border: 1px solid #DEE5EC;
            border-radius: 3px;

            &:active {
                color: #fff;
                background-color: #626BF1;
            }

            &.active {
                color: #fff;
                background-color: #626BF1;
            }
        }

    }

    .pub-btn {
        padding: 0;
        width: 126px;
        height: 36px;
        line-height: 36px;
        background: #565DFF;
        border-color: #565DFF;
        border-radius: 7px;

        &:hover {
            background: rgba(86, 93, 255, .8);
            border-color: rgba(86, 93, 255, .8);
        }

        &.el-button--primary.is-active,
        .el-button--primary:active {
            background: rgba(86, 93, 255, .8);
            border-color: rgba(86, 93, 255, .8);
        }

        &.el-button--primary:focus,
        .el-button--primary:hover {
            background: rgba(86, 93, 255, .8);
            border-color: rgba(86, 93, 255, .8);
        }
    }

    .item {
        width: 100%;
        height: 35px;
        line-height: 35px;
        text-align: center;
        cursor: pointer;

        &:hover {
            color: #4852EC;
            background-color: #F0F3F8;
        }
    }

    .question-list {
        position: relative;
        box-sizing: border-box;
        overflow-y: auto;
        height: 100%;

        .fixed {
            position: -webkit-sticky;
            position: sticky;
            padding: 0 20px;
            bottom: 0px;
            height: 60px;
            background-color: #fff;
            z-index: 100;
            border-top: 1px solid #d6dbe7;
        }
    }
</style>
